<script setup lang="ts">
import { defineProps, onMounted, reactive, ref, watch } from "vue";
import { createRandomId } from "../../../entity/helper/randomId";
import { Config, Echarts, EventBus, Store } from "../../../main";

const chartId = createRandomId();
const props = defineProps<{
  width?: string;
  height?: string;
  option: any;
}>();
onMounted(() => {
  let box = document.getElementById(chartId) as HTMLElement;
  chartBox = Echarts.init(box);
  chartBox.setOption(props.option);
});
let chartBox: echarts.ECharts;
const chartStyle = reactive<any>({
  width: props.width || "100vw",
  height: props.height || "100vh",
});
watch(
  () => props.option,
  () => {
    chartBox.setOption(props.option);
  }
);
</script>

<template>
  <div class="dashboard" :style="chartStyle" :id="chartId"></div>
</template>
<style scoped>
.dashboard {
  margin: 0.5%;
  padding: 0.5%;
  display: inline-block;
  border-radius: 0.1vw;
  background: white;
}
</style>
